<template>
	<view class="">
		<view class="top"><tab ref="tabs" id="tabs" :cur-index="tabCur" :tab-data="tabData" :color="color" :size="size" :scroll="scroll" @change="tabChange"></tab></view>

		<view :class="['control-panel', isIphoneX ? 'isX' : '']">
			<view class="panel-item">
				<view class="panel-item__hd">size:</view>
				<view class="panel-item__bd"><slider @changing="sizeChange" :value="size" show-value :min="80" :max="200" :step="10" /></view>
			</view>

			<view class="panel-item">
				<view class="panel-item__hd">scroll:</view>
				<view class="panel-item__bd"><switch :checked="scroll" @change="scrollChange" /></view>
			</view>

			<view class="panel-item">
				<view class="panel-item__hd">color:</view>
				<view class="panel-item__bd">
					<radio-group class="radio-group" @change="radioChange">
						<label class="radio" v-for="(item, index) in items" :key="index">
							<radio :value="item.value" :checked="item.checked" />
							{{ item.name }}
						</label>
					</radio-group>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const app = getApp()
let tabs

import Tab from '@/components/tab/index'

export default {
	components: {
		tab: Tab
	},
	data() {
		return {
			isIphoneX: app.globalData.isIphoneX,
			tabCur: 0,
			tabData: ['推荐', '精选集锦', '最新体验', '资料', '版本', '攻略', '排行', '热门'],
			size: 90,
			scroll: true,
			color: '#3F82FD',
			items: [{ name: '蓝', value: '#3F82FD', checked: 'true' }, { name: '红', value: '#ff4158' }]
		}
	},
	onLoad() {
		// tabs = this.selectComponent('#tabs')
	},
	methods: {
		radioChange(e) {
			this.color = e.detail.value
		},
		sizeChange(e) {
			this.size = e.detail.value
		},
		scrollChange(e) {
			if (e.detail.value) {
				this.tabData = ['推荐', '精选集锦', '最新体验', '资料', '版本', '攻略', '排行', '热门']
			} else {
				this.tabData = ['推荐', '版本', '攻略', '排行', '热门']
			}
			this.scroll = e.detail.value
		},
		tabChange(e) {
			console.log(e)
		}
	}
}
</script>

<style lang="scss">
@import '~@/common/css/variables';

.top {
	position: fixed;
	left: 0;
	top: 0;
	/* #ifdef H5 */
	top: var(--window-top);
	/* #endif */
	width: 100%;
	background-color: #ffffff;
	z-index: 99;
	box-shadow: $shadow;
}

.control-panel {
	border-top: 1rpx solid $lineColor;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 12213;
	background: #ffffff;
	padding: 20rpx;
	box-sizing: border-box;

	&.isX {
		padding-bottom: 60rpx;
	}
}

.panel-item {
	display: flex;
	align-items: center;

	&_hd {
	}

	&__bd {
		flex: 1;
		margin-left: 20rpx;

		.radio-group {
			display: flex;

			.radio {
				display: flex;
				align-items: center;
				margin-right: 20rpx;
			}
		}
	}
}
</style>
